<template>
  <div class="home">
     <router-view></router-view>
	 <div class="bottom_div">
		 <div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
			<router-link :to="item.to">
			 <img :src="index==selected?item.activeUrl:item.url"  />
			 <p :class="{color_active:index==selected}">{{item.text}}</p>
		</router-link>
		 </div>
	 </div>
  </div>
</template>

<script>
	export default{
		data(){
			return{
				tabList:[
					{
						url:require("../assets/home/SYWX.png"),
	                    activeUrl:require("../assets/home/SYXZ.png"),
						text:"首页",
						to:'/home'
					},
					{
						url:require("../assets/home/GWWX.png"),
					    activeUrl:require("../assets/home/GWXZ.png"),
						text:"购物车",
						to:'/home/shopcard'
					},
					{
						url:require("../assets/home/DDWX.png"),
					    activeUrl:require("../assets/home/DDXZ.png"),
						text:"订单",
						to:'/home/order'
					},
					{
						url:require("../assets/home/WDWX.png"),
					    activeUrl:require("../assets/home/WDXZ.png"),
						text:"我的",
						to:'/home/mine'
					}
				],
				selected:0
			}
		},
		methods:{
			change:function(index){
				this.selected=index
			}
		}
	}
</script>


<style>
	.bottom_div{
		background-color: #f1f1f1;
		height: 49px;
		width: 100%;
		position: fixed;    /* 固定定位 */
		bottom: 0;			/* 固定定位 */
		display: flex;      /* 弹性布局 */
		align-items:center ; /* 上下居中 */
	}
	.bottom_div	.tab_div{
			 text-align: center;
			 flex: 1;
		}
	.tab_div img{
		width: 20px;
		height: 20px;
	}
	.tab_div p{
		font-size: 10px;
		color: #333333;
	}
	.tab_div .color_active{
		color: #1FA4FC;
	}
</style>
